<template>
  <div class="Login" ref="login">
    <div class="logo"></div>
    <div class="content">
      <div class="form">
        <div class="input">
          <van-field v-model="form.username" clearable placeholder="请输入用户名" />
        </div>
        <div class="input">
          <van-field v-model="form.password" clearable :type="isPasswordType?'text':'password'" placeholder="输入您的密码…">
            <span class="showPassWord" slot="bottom" :class="{active: isPasswordType && form.password}" @click="showPassWord"></span>
          </van-field>
        </div>
      </div>
      <div class="submit">
        <van-button round type="info" :loading="isLoading" @click.native="submitLogin" color="#125DFF">登录</van-button>
      </div>
      <div class="operation">
        <van-checkbox v-model="IsPassword" shape="square">账号记住密码</van-checkbox>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'md5';
export default {
  name: 'JLogin',
  inject: ['reload'],
  data () {
    return {
      IsPassword: false,
      isLoading: false,
      height: 0,
      isPasswordType: false,
      form: {
        username: '', // 17790183715
        password: '' // 111111
      }
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.height = this.$refs.login.clientHeight;
    });
  },
  created () {
    var form = JSON.parse(localStorage.getItem('form'));
    this.IsPassword = !!form;
    this.form = form || {
      username: '',
      password: ''
    };
  },
  methods: {
    setStatusBarStyle (data) {
      // 设置状态栏颜色
      window.api && window.api.setStatusBarStyle({
        style: data,
        color: 'transparent'
      });
    },
    goPassword () {
      this.$store.dispatch('setLogin', false);
      this.$router.push({ 'path': '/password/edit', query: { type: 1 } });
    },
    submitLogin () {
      if (this.isLoading) {
        return;
      }
      // var disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.username));
      // if (disabled) {
      //   this.$toast('请输入正确的手机号!');
      //   return;
      // }
      var _account = this.form.username + '';
      var _password = this.form.password + '';
      if (!_account) {
        this.$toast('用户名不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      var options = {
        username: _account,
        password: md5(md5(_password))
      };
      this.isLoading = true;
      this.$API.user.login(options).then(res => {
        if (!res.code) {
          localStorage.setItem('Token', res.data.token);
          this.IsPassword && localStorage.setItem('form', JSON.stringify(this.form));
          this.$toast('登录成功');
          if (this.$route.name !== 'login') {
            this.$store.dispatch('setLogin', false);
          } else {
            this.$router.push({ path: '/my' });
          }
          this.$store.dispatch('setLogin', false);
          this.$store.dispatch('setUserInfo');
          // localStorage.setItem('reloadRouterURL', this.$route.path);
          // this.reload();
        }
        this.isLoading = false;
      });
    },
    showPassWord () {
      if (!this.form.password) {
        return;
      }
      this.isPasswordType = !this.isPasswordType;
    }
  }
};
</script>
<style scoped lang="less">
.Login {
  height: 100%;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  .logo {
    width: 156px;
    height: 156px;
    margin: 156px auto 194px;
    background-image: url('/static/img/logo.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
  // .after {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   display: flex;
  //   align-items: flex-end;
  //   pointer-events: none;
  //   &::after {
  //     content: '';
  //     width: 100%;
  //     height: 389px;
  //     display: block;
  //     pointer-events: none;
  //     background-image: url('/static/images/icon-login-bg.png');
  //     background-position: center bottom;
  //     background-repeat: no-repeat;
  //     background-size: 100% 389px;
  //   }
  // }
  padding-top: env(safe-area-inset-top);
  .welcome {
    font-size: 50px;
    color: #fff;
    padding: 70px 60px 60px;
  }
  .close {
    position: absolute;
    top: 30px;
    right: 50px;
    width: 34px;
    height: 34px;
    display: block;
    background-image: url('/static/images/icon-login-close.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 34px 34px;
  }
  .content {
    padding: 0 60px;
    .operation {
      padding-top: 45px;
      display: flex;
      justify-content: space-between;
      font-size: 28px;
      .text {
        span {
          vertical-align: middle;
        }
        .reg {
          padding-left: 20px;
        }
        .line {
          height: 34px;
          width: 1px;
          padding: 0 25px 0 0;
          display: inline-block;
          border-right: 1px solid #d8d8d8;
        }
      }
    }
    .form {
      border: 1px solid #eee; /*no*/
      border-radius: 8px;
      .van-cell {
        background-color: transparent;
      }
      .input {
        position: relative;
        border-bottom: 1px solid #eee; /*no*/
        .showPassWord {
          display: block;
          width: 40px;
          height: 21px;
          margin-left: 10px;
          background-image: url('/static/images/icon-login-hide.png');
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
        }
        .showPassWord.active {
          background-image: url('/static/images/icon-login-show.png');
        }
      }
      .input:last-child {
        border-bottom: none;
      }
    }
    .submit {
      margin-top: 67px;
      .van-button {
        width: 100%;
        height: 96px;
        .van-button__text {
          font-size: 34px;
        }
      }
    }
  }
}
</style>
